<template>
  <div>
    <a-divider>事件监听</a-divider>
    <a-form-item label='监听处理器' v-bind="formItemLayout" extra="监听节点事件，在事件触发时，由指定监听器处理流程关联数据。">
      <span>已配置{{listenerConfigs.length}}个监听器 | <a @click="editListeners">配置</a></span>
    </a-form-item>
    <listener-config @change="dataChange" :host-type="hostType" v-model="listenerConfigs" ref="ListenerConfig"></listener-config>
  </div>
</template>
<script>

import ListenerConfig from "./ListenerConfig"

const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 14}
}
export default {
  name: 'NodeListenerConfig',
  components: {ListenerConfig},
  props: {
    listenerConfigs: {
      type: Array,
      required: false,
      default:  () => []
    },
    hostType: {
      type: String,
      required: true
    }
  },
  model: {
    prop: 'listenerConfigs',
    event: 'input'
  },
  data () {
    return {
      formItemLayout
    }
  },
  methods: {
    dataChange () {
      this.$emit('input', this.listenerConfigs)
    },
    editListeners () {
      this.$refs.ListenerConfig.edit()
    }
  }
}
</script>
